<template>
    <div class="tree-select">
        <a-tree-select v-model="selectValue" allowClear :filterTreeNode="filterTreeNode" @change="change" multiple style="width: 100%" :tree-data="treeData"
            tree-checkable :replaceFields="{children:'levelList', title:'name', key:'sid', value: 'sid'}" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" @treeExpand="loadTreeData"
            :show-checked-strategy="SHOW_All" :placeholder="placeholder" />
        <div class="right">
            <div class="ml-20 more" v-if="!show" @click="show = !show">更多</div>
            <a-radio-group v-if="show" class="ml-20" :default-value="selectType" @change="onChangeRadio">
                <a-radio :value="0">正选</a-radio>
                <a-radio :value="1">反选</a-radio>
            </a-radio-group>
        </div>
    </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue';
import { keys } from 'lodash';
import { queryProvince, queryCity, queryDistrict,address } from '../../../api/micromall/storePackage';
const SHOW_All = TreeSelect.SHOW_PARENT //TreeSelect.SHOW_ALL;

export default {
    name: '',
    props: {
        value: {
            type: Object
        },
        placeholder: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            treeData: [],
            SHOW_All,
            show: false,
            selectType: 0,
            selectValue: undefined,
            treeExpands: []
        }
    },
    mounted() {
        // this.getProvince()
        this.queryLocations()
    },
    watch: {
        value(n) {
            if (n) {
                const { selectValue, selectType } = n
                this.selectValue = selectValue
                this.selectType = selectType == 0 ? selectType : 1
                
            }
        }
    },
    components: {

    },
    methods: {
      filterTreeNode(value,nodes){
        return nodes.data.props.name.includes(value)
        
      },
        formatTree(data,lv = 'p',pre,parentId) {
            if(!Array.isArray(data)) return []
            const childLv = lv == 'p' ? 'c' : 'd'
            return data.map((item,index) => {
                item.self = lv + '-' + item.id
                item.pre = pre ? pre + '-' +index : index
                item.sid = parentId ? parentId + '-' + item.id : item.id
                if(item && item.levelList.length > 0){
                    item.levelList = this.formatTree(item.levelList,childLv,item.pre,item.sid)
                }
                return item
            })
        },
        async loadTreeData(keys) {
            this.treeExpands = keys
        },
        async queryLocations(){
            const res = await address()
            this.treeData  = this.formatTree(res.data.provinceListDto)
            console.log(this.treeData)
        },
        async getProvince() {
            const res = await queryProvince()
            if (res.code == 200) {
                this.treeData = this.formatTree(res.data,'p')
            } else {
                this.$message.error(res.msg)
            }
        },
        onChangeRadio(e) {
            this.selectType = e.target.value
            this.triggerChange({ selectValue: this.selectValue, selectType: this.selectType })
        },
        change(e) {
            console.log(e)
            this.selectValue = e
            this.triggerChange({ selectValue: this.selectValue, selectType: this.selectType })
        },
        triggerChange(changedValue) {
            this.$emit('change', Object.assign({}, changedValue));
        },
    }
}
</script>

<style scoped>
.selct-j {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.right {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    transform: translateX(100%);
}

.ml-20 {
    margin-left: 20px;
}

.more {
    cursor: pointer;
}
</style>

    
